<template>
	<view class="login-container">
		<view class="login-item">
			<navigator url="/pages/register/register" class="txtRegister">注 册</navigator>
		</view>
		<view class="login-item">
			<text>账号:</text>
			<input type="text" @input="onAccount" placeholder="添加账号" />
		</view>
		<view class="login-item">
			<text>密码:</text>
			<input class="uni-input" password type="text" placeholder="请输入密码" @input="onKeyInput" />
		</view>
		<view>
			<button type="primary" @click="getLogin">登录</button>
		</view>
		<view class="login-item">
			<navigator url="/pages/resetting/resetting" class="txtRestting">忘记密码</navigator>
		</view>
	</view>
</template>

<script>
	import service from '../../utils/http.js'
	import md5 from 'js-md5';
	import {
		mapMutations,mapState
	} from 'vuex'
	export default {
		data() {
			return {
				Account: '',
				Password: ''
			};
		},		
		methods: {
			...mapMutations('m_user', ['updateUserinfo']),
			//获取输入的账号信息
			onAccount(event) {
				this.Account = event.detail.value
				// console.log(this.Account)
			},
			//获取输入的密码信息
			onKeyInput(event) {
				let password = event.detail.value
				this.Password = md5(password)
				// console.log(this.Password)
			},
			async getLogin() {
				//校验账号信息
				if (this.Account == '') {
					uni.$showMsg('账号不能为空')
					return
				}
				//校验密码信息
				if (this.Password == '') {
					uni.$showMsg('密码不能为空')
					return
				}
				service.get('/api/Users?account=' + this.Account)
					.then(response => {
						// console.log(response)
						const data = JSON.parse(response.Data)
						if (response.Code == '1' && data.length > 0) {
							this.updateUserinfo(data[0])
							let pwd = data[0].Password
							if (pwd == this.Password) {
								// 跳转到tab页面
								uni.switchTab({
									url: '/pages/home/home'
								})
							} else {
								uni.$showMsg('密码不正确,请重新输入')
							}
						} else {
							uni.$showMsg('账号信息不存在，请先注册')
						}
					})
					.catch(error => {
						console.error(error);
					});
			}
		}
	}
</script>

<style lang="scss">
	.login-container {
		margin: 10px 20px 0px 20px; //上 左 下 右

		.login-item {
			display: flex;
			flex-direction: row;
			margin-bottom: 10px;
		}

		.txtRestting {
			margin-top: 10px;
			color: darkgray;
		}

		.txtRegister {
			color: orangered;
			font-size: 18px;
		}
	}
</style>